<template>
    <div id="earlyWarning">
        <div id="gis">gis</div>
        <div class="gistools">
            <el-dropdown @command="handleCommand1">
                <span class="el-dropdown-link">
                    <i class="el-icon-location"></i>
                    {{tools1_str}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a1">黄金糕1</el-dropdown-item>
                    <el-dropdown-item command="b1">狮子头1</el-dropdown-item>
                    <el-dropdown-item command="c1">螺蛳粉1</el-dropdown-item>
                    <el-dropdown-item command="d1">双皮奶1</el-dropdown-item>
                    <el-dropdown-item command="e1">蚵仔煎1</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
             <el-dropdown @command="handleCommand2">
                <span class="el-dropdown-link">
                    <i class="el-icon-location"></i>
                    {{tools2_str}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a2">黄金糕2</el-dropdown-item>
                    <el-dropdown-item command="b2">狮子头2</el-dropdown-item>
                    <el-dropdown-item command="c2">螺蛳粉2</el-dropdown-item>
                    <el-dropdown-item command="d2">双皮奶2</el-dropdown-item>
                    <el-dropdown-item command="e2">蚵仔煎2</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
             <el-dropdown @command="handleCommand3">
                <span class="el-dropdown-link">
                    <i class="el-icon-location"></i>
                    {{tools3_str}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a3">黄金糕3</el-dropdown-item>
                    <el-dropdown-item command="b3">狮子头3</el-dropdown-item>
                    <el-dropdown-item command="c3">螺蛳粉3</el-dropdown-item>
                    <el-dropdown-item command="d3">双皮奶3</el-dropdown-item>
                    <el-dropdown-item command="e3" >蚵仔煎3</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="aside-table">
           <div class="toggleBar">
              <template v-if="tableShow">
                <i class="el-icon-arrow-left" @click="closeTable"></i>
              </template>
              <template v-else>
                <i class="el-icon-arrow-right" @click="openTable"></i>
              </template>
            </div>
            <div class="inner" v-if="tableShow">
              <div class="row">
                  <div class="top-tabItem">选择图层</div>
                  <div class="tabs">
                      <div class="tab-item" @click="activeThis(index)" :class="{active:index==actived}" v-for="(item,index) in tabs" :key="index">{{item.name}}</div>
                  </div>
              </div>
              <div class="row">
                  <div class="select-item">
                      <span>选择对象:</span>
                      <el-select v-model="value" placeholder="请选择">
                          <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                      </el-select>
                  </div>
                  <div class="select-item">
                      <span>所属区域:</span>
                      <el-select v-model="value" placeholder="请选择">
                          <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                      </el-select>
                  </div>
                  <div class="select-item">
                      <span>测点名称:</span>
                      <el-select v-model="value" placeholder="请选择">
                          <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                      </el-select>
                  </div>
                  <div class="select-item">
                      <span>管线编号:</span>
                      <el-select v-model="value" placeholder="请选择">
                          <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                      </el-select>
                  </div>
                  <div class="select-item">
                    <span>时间:</span>
                    <el-date-picker
                      v-model="dateValue"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                    <span>从:</span>
                    <el-time-select
                    v-model="timeValue"
                    :picker-options="{
                      start: '08:30',
                      step: '00:10',
                      end: '18:30'
                    }"
                    placeholder="选择时间">
                  </el-time-select>
                  <span>到:</span>
                    <el-time-select
                    v-model="timeValue"
                    :picker-options="{
                      start: '08:30',
                      step: '00:10',
                      end: '18:30'
                    }"
                    placeholder="选择时间">
                  </el-time-select>
                  <el-button type="primary">搜索</el-button>
                </div>
                <div class="table">
                  <table>
                    <tr class="thead">
                      <td><span>监测点名称</span></td>
                      <td><span>预警时间</span></td>
                      <td><span>监测项类型</span></td>
                      <td><span>实时监测值</span></td>
                      <td><span>预警状态</span></td>
                      <td><span>历史详情</span></td>
                      <td><span>操作</span></td>
                    </tr>
                    <tr>
                      <td><span>临河大道监测点</span></td>
                      <td><span>6-1210:09</span></td>
                      <td><span>压力(MPa)</span></td>
                      <td><span>5.2</span></td>
                      <td><span>待处理</span></td>
                      <td><span class="btn">详情</span></td>
                      <td><span class="btn" @click="showAction_">处理</span></td>
                    </tr> 
                    <tr>
                      <td><span>临河大道监测点</span></td>
                      <td><span>6-1210:09</span></td>
                      <td><span>压力(MPa)</span></td>
                      <td><span>5.2</span></td>
                      <td><span>待处理</span></td>
                      <td><span class="btn">详情</span></td>
                      <td><span class="btn">处理</span></td>
                    </tr>
                  </table>
                </div>
                <div class="pagenation">
                    <pagenation :noSmall='paginate.ifSmall' :totalPage="paginate.totalPage_"></pagenation>
                </div>
              </div>
            </div>
        </div>
    <warn-model :showDefinedModel="showAction" :title="'监测点检修任务处理'" @hiddenSelf="closedActionModel">
        <div class="taskProcess">
            <div class="topDesc">
              <div class="row"><span>监测点名称:</span> <span>临江大道监测点</span> </div>
              <div class="row">
                <div class="col">
                  <span>检测项类型:</span> <span>压力(MPa)</span> 
                </div>
                <div class="col">
                  <span>实时检测值:</span> <span>5.2</span> 
                </div>
              </div>
              <div class="subContent">
                <span>2018年7月11日 进行阀门改造,并进行相应的检修</span>
              </div>
            </div>
            <div class="footer">
              <span class="dispach" @click="callSub">派单</span>
              <span class="actions" >处理</span>
            </div>
        </div>
    </warn-model>
    </div>
</template>
<script>
import pagenation from "@/common/components/pagination";
import warnModel from "@/common/components/Poupe/defined";
export default {
  components: {
    pagenation,
    warnModel
  },
  data() {
    return {
      tools1_str: "交通图",
      tools2_str: "工具",
      tools3_str: "全屏",
      tableShow: true,
      showAction: false, //显示任务处理的弹窗
      dateValue: "", // 日期选择
      timeValue: "", // 时间选择
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      date_: "",
      radio_: "1",
      tabs: [{ name: "水压" }, { name: "流量" }, { name: "水龄" }],
      actived: 0, //侧边栏 tabs
      flow: {
        content_tabs: [{ name: "警告" }, { name: "流量监测数值" }],
        actived_contentTab: 0, //内容区 tabs
        contentList: [
          {
            address: "临河大道",
            number: "NXST-0001",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true,
            radio_status: "1"
          },
          {
            address: "临河大道FGHFGGUY",
            number: "NXST-0001",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true,
            radio_status: "2"
          }
        ]
      },
      waterPress: {
        content_tabs: [{ name: "警告" }, { name: "压力监测数值" }],
        actived_contentTab: 0, //内容区 tabs
        contentList: [
          {
            desc: "流量大于阈值",
            name: "临河大道",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true
          },
          {
            desc: "流量大于阈值",
            name: "临河大道",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true
          }
        ]
      },
      waterQuality: {
        content_tabs: [{ name: "警告" }, { name: "水质监测数值" }],
        actived_contentTab: 0, //内容区 tabs
        contentList: [
          {
            desc: "流量大于阈值",
            name: "临河大道",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true
          },
          {
            desc: "流量大于阈值",
            name: "临河大道",
            time: "4-30 09:32",
            flowNum: "1.8",
            status: true
          }
        ]
      },
      waterAge: {
        contentList: [
          {
            age: "12h",
            desc: "水龄时长超过24h",
            name: "临河大道"
          },
          {
            age: "12h",
            desc: "水龄时长超过24h",
            name: "临河大道"
          }
        ]
      },
      DetonatingRisk: {
        contentList: [
          {
            level: "0.65",
            name: "临河大道"
          },
          {
            level: "0.82",
            name: "临河大道"
          }
        ]
      },
      paginate: {
        //分页器
        ifSmall: true,
        totalPage_: 12
      },
      pipeBoomDescTab: [{ name: "基本信息" }, { name: "工单详情" }],
      pipeBoom_selected: 0
    };
  },
  methods: {
    handleCommand1(command) {
      let temp_str = command;
      let that = this;
      switch (temp_str) {
        case "a1":
          that.tools1_str = "黄金糕1";
          break;
        case "b1":
          that.tools1_str = "狮子头1";
          break;
        case "c1":
          that.tools1_str = "螺蛳粉1";
          break;
        case "d1":
          that.tools1_str = "双皮奶1";
          break;
        case "e1":
          that.tools1_str = "蚵仔煎1";
      }
    },
    handleCommand2(command) {
      let temp_str = command;
      let that = this;
      switch (temp_str) {
        case "a2":
          that.tools2_str = "黄金糕2";
          break;
        case "b2":
          that.tools2_str = "狮子头2";
          break;
        case "c2":
          that.tools2_str = "螺蛳粉2";
          break;
        case "d2":
          that.tools2_str = "双皮奶2";
          break;
        case "e2":
          that.tools2_str = "蚵仔煎2";
      }
    },
    handleCommand3(command) {
      let temp_str = command;
      let that = this;
      switch (temp_str) {
        case "a3":
          that.tools3_str = "黄金糕3";
          break;
        case "b3":
          that.tools3_str = "狮子头3";
          break;
        case "c3":
          that.tools3_str = "螺蛳粉3";
          break;
        case "d3":
          that.tools3_str = "双皮奶3";
          break;
        case "e3":
          that.tools3_str = "蚵仔煎3";
      }
    },
    activeThis(index) {
      this.actived = index;
    },
    showThisTab(index) {
      this.pipeBoom_selected = index;
    },
    closedActionModel(flag) {
      this.showAction = flag;
    },
    showAction_() {
      this.showAction = true;
    },
    callSub() {
      this.$router.push({ name: "pipe_monitor_dispatch" });
      this.$store.commit("setAside_status", false);
      this.$emit("hiddenAside");
    },
    closeTable(){
      this.tableShow = false;
    },
    openTable(){
      this.tableShow = true;
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
#earlyWarning {
  width: 100%;
  height: 100%;
  position: relative;
  #gis {
    width: 100%;
    height: 100%;
  }

  .model .content .taskProcess {
    width: 100%;
    height: 100%;
    font-size: 14px;
    color: #333;
    padding: 10px 0;
    .topDesc {
      width: 100%;
      padding: 0 10px;
      .row {
        width: 100%;
        height: 30px;
        line-height: 30px;
        span {
          display: inline-block;
          margin-right: 10px;
        }
        display: flex;
        justify-content: flex-start;
        .col {
          margin-right: 20px;
        }
        &:last-child {
          margin-bottom: 5px;
        }
      }
    }
    .subContent {
      width: 100%;
      height: 50px;
      border: 1px solid #ccc;
      padding: 5px;
      overflow-y: auto;
      margin-bottom: 10px;
      border-radius: 5px;
    }

    .footer {
      width: 100%;
      height: 35px;
      background: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        display: inline-block;
        padding: 3px 10px;
        border: 1px solid blue;
        color: blue;
        border-radius: 3px;
        margin-right: 10px;
        cursor: pointer;
      }
    }
  }
  .gistools {
    width: 350px;
    height: 30px;
    padding: 0 20px;
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    .el-dropdown {
      cursor: pointer;
    }
  }
  .aside-table {
    position: absolute;
    right: 20px;
    top: 70px;
    height: calc(100% - 70px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    .toggleBar {
      width: 20px;
      height: 40px;
      position: absolute;
      left: -20px;
      top: 50%;
      border: 1px solid #ccc;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
    .inner {
      width: 700px;
      height: 100%;
      position: relative;
      display: flex;
    justify-content: space-between;
      .row:first-child {
        width: 100px;
        height: 100%;
        font-size: 14px;
        color: #333;
        .top-tabItem {
          width: 100%;
          height: 30px;
          line-height: 30px;
          background: #ccc;
          text-align: center;
        }
        .tabs {
          width: 100%;
          height: calc(100% - 30px);
          overflow-y: auto;
          text-align: center;
          .tab-item {
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            &.active {
              background: blue;
              color: #fff;
            }
          }
        }
      }
      .row:last-child {
        width: calc(100% - 100px);
        padding-top: 0;
        border-left: 1px solid #ccc;
        & > .select-item {
          width: 100%;
          height: 50px;
          line-height: 30px;
          padding: 10px;
          font-size: 14px;
          color: #333;
          display: flex;
          justify-content: space-between;
          span {
            display: inline-block;
            width: 80px;
            margin-left: 10px;
          }
          .el-select {
            width: calc(100% - 80px);
          }
          .el-date-editor--date {
            width: 300px;
          }
          .el-date-editor--time-select {
            width: 250px;
          }
          button {
            margin-left: 10px;
          }
        }
        .table {
          width: 100%;
          table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            font-size: 14px;
            color: #333;
            text-align: center;
            tr.thead {
              font-weight: 600;
            }
            tr td {
              max-width: 200px;
              height: 40px;
              border-right: 1px solid #ccc;
              border-bottom: 1px solid #ccc;
              min-width: 50px;
              span {
                width: 100%;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &.btn {
                  display: inline;
                  padding: 2px 5px;
                  border: 1px solid blue;
                  border-radius: 5px;
                  color: blue;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .pagenation {
          width: 100%;
          padding: 10px;
        }
      }
    }
  }
}
</style>


